<template>
  <div class="rb-steps">
    <ul class="wrap">
      <li class="item" :class="[item.abnormalDeleted == 1 ? 'filter' : '']" v-for="(item, index) in list "
        :key="item.title" :id="`rb-label-${item.process}`">
        <img class="icon" :src="getStatusImage(item.processResult)" alt="" srcset="">
        <div class="title">
          <span>{{ item.process }}</span>
          <i class="iconfont icon-bi usericon" v-if="item.canEdit" @click="openModal(item)"></i>
          <div class="interview-box" v-if="item.status && (item.processResult != '进行中' || item.showDetail)"
            :style="item.status.style" @click="handleClick(item)"
            :class="[(!item.userTrainingInfo?.trainingUrl && item.process == '预约培训') ? 'disable' : '']">
            <DingdingOutlined v-show="item.status.dd_icon" />
            {{ item.status.text }}
          </div>
        </div>
        <div class="tip-wrap">
          <div class="tip" v-for="el in item.tip" :key="el.label">
            <div class="tip-left" v-show="el.label">{{ el.label }}:</div>
            <div class="tip-right">{{ el.value }}</div>
          </div>
          <div class="checkAttachments"
            v-show="(item.process == '签署三方协议' || (item.process == '签署应约协议' && item.agreementResponse?.agreementUrl)) && item.processResult != '进行中'"
            @click="checkAttachments(item)">查看附件</div>
          <div v-pre>
            <!--            <div class="pre" v-if="showHtml" v-html="getProcessAndTime(item)"></div>-->

          </div>
          <div class="pre" v-html="item.html"></div>
        </div>
        <div class="content" v-if="item.remark && (item.processResult != '进行中' || item.showDetail)">
          <TextClamp :content="item.remark"></TextClamp>
        </div>
        <div class="sub-list" v-if="item.subList">
          <ul>
            <li v-for="el in item.subList">
              <div>{{ el.key }}：</div>
              <div>{{ el.value }}</div>
            </li>
          </ul>
        </div>
        <div class="content" v-if="item.content && (item.processResult != '进行中' || item.showDetail)">
          <TextClamp :content="item.content"></TextClamp>
        </div>
        <!-- ||item.process=='考核' -->
        <div class="evaluateList" v-show="item.process !== '试用'"
          v-if="item.assessList && (item.processResult != '进行中' || item.showDetail || item.process == '考核')">
          <div class="context" v-for="(el, idx) in item.assessList">
            <div class="top" v-if="item.process !== '实习'">
              <div class="index" v-show="item.process !== '培训中'">
                <span>{{ idx + 1 }}</span>
              </div>
              <div class="days" v-show="item.process === '培训中'">
                <span>第{{ el.days }}天</span>
              </div>
              <span class="status-box" v-if="item.process !== '实习'">
                <span v-if="item.process == '培训中'">培训评价{{ idx + 1 }}</span>
                <span v-else-if="item.process == '考核'">考核官{{ idx + 1 }}-评价 <span
                    :style="getInterviewStatus(el.result).style" style="padding:0 4px;border-radius: 3px;">{{ el.result
                    }}</span></span>
                <span v-else-if="item.process == '试用'">评价{{ idx + 1 }}</span>
                <span v-else>{{ item.process }}官{{ idx + 1 }}</span>
              </span>
              <div class="top-right">
                <div>
                  评价录入：{{ el.operator }}
                </div>
                <div>
                  操作时间：{{ el.operatorTime }}
                </div>
              </div>
            </div>
            <div class="detail">
              <div class="reason" v-if="item.process == '实习'">
                <p class="reason-status"> 状态{{ idx + 1 }}：
                  <span :class="el.result == '离岗' ? 'reason-active' : ''">{{ el.result }}</span>
                <div class="top-right">
                  <div>
                    评价录入：{{ el.operator }}
                  </div>
                  <div>
                    操作时间：{{ el.operatorTime }}
                  </div>
                </div>
                </p>
                <p v-show="el.result == '离岗'">离岗时间：{{ el.outDutyTime?.replace(",", " 至 ") }}</p>
                <p class="reason-index">
                <div class="index">
                  <span>{{ idx + 1 }}</span>
                </div> {{ el.result == '在岗' ? '在岗评价' : '离岗原因' }}：</p>
              </div>
              <TextClamp :content="el.assess || el.reason"></TextClamp>
              <!-- <p  v-if="item.process == '实习'">离职原因：{{item}}</p> -->

            </div>
          </div>
        </div>
        <div class="add-comment" v-show="item.process == '培训中' && item.processResult == '通过'"
          v-if="item.process != '试用'" @click="addComment(item)">
          新增评价</div>
        <div class="btns" v-if="item.button && (item.processResult != '进行中' || item.showDetail)">
          <Button v-auth="'secondSendTrainingMailAccept'" v-if="item.process == '发送培训邮件'" class="btn" color="#eaf6fd"
            @click="handleBtnClick(item)">{{ item.button.name }}</Button>
          <Button v-else color="primary" @click="handleBtnClick(item)">{{ item.button.name }}</Button>
        </div>

        <div class="evaluateList" style="margin-top:10px" v-show="item.failedList">
          <div class="context" :style="{ background: el.style.background }" v-for="(el, idx) in item.failedList">
            <div class="top">
              <span class="status-box">
                <span :style="{ color: el.style.color }">{{ el.key }}</span>
              </span>
              <div class="top-right">
                <div>
                  操作人：{{ el.operator }}
                </div>
                <div>
                  操作时间：{{ el.operatorTime }}
                </div>
              </div>
            </div>
            <TextClamp :content="el.value"></TextClamp>
          </div>
        </div>
        <div class="operator" v-if="!item.failedList"
          v-show="(item.processResult != '进行中' || item.showDetail) && item.operator">
          <div class="operator-person"> 操作人：{{ item.operator }}</div>
          <div class="operator-time">操作时间：{{ item.operatorTime }}</div>
        </div>
        <div class="evaluateList" style="margin-top:10px" v-if="item.assessList && item.process == '试用'">
          <div class="context" v-for="(el, idx) in item.assessList">
            <div class="top">
              <div class="index">
                <span>{{ idx + 1 }}</span>
              </div>

              <span class="status-box">
                <span>评价{{ idx + 1 }}</span>
              </span>
              <div class="top-right">
                <div>
                  评价录入：{{ el.operator }}
                </div>
                <div>
                  操作时间：{{ el.operatorTime }}
                </div>
              </div>
            </div>
            <TextClamp :content="el.assess || el.reason"></TextClamp>
          </div>
        </div>

      </li>
    </ul>
  </div>
  <SendTrainMailModal ref="modal" type="sendAgain" :current='row'></SendTrainMailModal>
  <BasicModal :show="commentShow" title="新增评价" width="30%" :widthComfirm="true" @comfirm="commentComfirm"
    @closeModal="commentShow = false">
    <template #content>
      <CommonForm :formList="commentFormList" ref="commentFormRef"></CommonForm>
    </template>
  </BasicModal>
  <RBModal ref="RBModalRef" @reRender="reRender"></RBModal>
  <BasicModal :show="agreementShow" title="查看协议" width="60%" @closeModal="agreementShow = false">
    <template #content>
      <ContractAgreement :agreementDetail="agreementDetail" v-if="showTrain == 1"></ContractAgreement>
      <TrainAgreement :agreementDetail="agreementDetail" v-if="showTrain == 2"></TrainAgreement>
      <div class="img-container">
        <img v-for="el in tripartiteAgreementList" :src="el" alt="" srcset="" v-if="showTrain == 3">
      </div>
    </template>
  </BasicModal>
  <ChangeHRModal ref="changeHrRef"></ChangeHRModal>
</template>

<script setup lang='ts'>
import { ref, watch, defineProps, onMounted } from "vue";
import TextClamp from "../../components/TextClamp.vue";
import { Button } from '@/components/Button';
import { getImageUrl } from "@/assets/common/common.ts";
import { progressIndex, trainingProgress } from "@/api/application-details/index.ts";
import { comStores } from '@/store/common/comStore';
import SendTrainMailModal from "../Modals/SendTrainMailModal.vue";
import BasicModal from "@/views/ApplicationDetails/Modals/BasicModal.vue";
import type { IndexFormItem } from "@/views/ApplicationDetails/application-type.ts";
import CommonForm from "@/views/applicationDetails/CommonForm.vue";
import RBModal from "../Modals/RBModal.vue";
import ContractAgreement from "../Agreement/ContractAgreement.vue";  //应约协议
import TrainAgreement from "../Agreement/TrainAgreement.vue";
import ChangeHRModal from "../Modals/ChangeHRModal.vue";  //培训协议
import { message } from "ant-design-vue";

export interface AssessList {
  result?: string
  assess: string
  operator: string
  operatorTime: string
}

export interface ListItem {
  processId: number
  process: string
  processResult: string
  operator?: string
  operatorTime?: string
  interviewOfficer?: string
  trainingOfficer?: string[]
  examineOfficer: any
  examineTime: any
  interviewTime?: string
  interviewType?: string
  assessList?: AssessList[]
  trainingTime?: string
  trainingDislikeFood: any
  trainingUrl: any
  eliminateReason: any
  abandonReason: any
  remark?: string
  school: any
  onDutyTime: any
  subject: any
  grade: any
  abnormal: number
  abnormalDeleted: number
  processDetail?: string
  status?: any,
  canEdit?: boolean,
}

const store = comStores();
const modal = ref<any>(SendTrainMailModal)
const props = defineProps(['type', 'stepList', 'id'])
const commentShow = ref<boolean>(false)
const agreementShow = ref<boolean>(false);
const showTrain = ref<number>(1);
const tripartiteAgreementList = ref<string[]>([])
const commentFormList = ref<IndexFormItem[]>([
  { label: "评价", name: "remark", value: "", component: 'textarea', required: true },
])

const showHtml = ref(false)
watch(() => props.stepList, (val) => {
  const stepList = JSON.parse(JSON.stringify(val))
  stepList.forEach(item => {
    if (item.abnormal === 1 && item.processResult != '淘汰' && item.processResult != '放弃') {
      item.processResult = "警告"
    }
    if ((item.processResult == '淘汰' || item.processResult == '放弃')) {
      item.status = getInterviewStatus(item.processResult)
    }
    if (item.process == '面试') {
      item.status = getInterviewStatus(item.processResult);
      item.remark = item?.assessList ? item?.assessList[0]?.assess : item.remark
      item.assessList = []
    } else if (item.process == '预约培训') {
      item.status = getInterviewStatus("查看《参培协议》")
    } else if (item.process == '发送培训邮件') {
      item.button = {
        name: "再次发送",
        method: "sendAgain"
      }
    }
    item.html = getProcessAndTime(item)
  });
  list.value = stepList;
}, { deep: true })
const RBModalRef = ref<any>(null)
const changeHrRef = ref<any>(null)

const openModal = (item) => {
  console.log(item)
  if (item.process == '预约面试') {
    changeHrRef.value.showDialog(item.interviewOfficer, "面试官",item)
  } else {
    RBModalRef.value.showDialog(item)
  }
}
const getNameDetail = (options, config = false, type: null | string = null) => {
  if (config) {
    return options ? options?.join("、") : '未设置'
  }
  if (type == 'link') {
    if(options){
      return `<a class='interviewUrl' target='_blank' href=${options}>${options}</a>`
    }
    return "未填写"
  }
  return options ? options : "未设置"
}

const getProcessAndTime = (item) => {
  let str = "";
  if (item.processResult == '进行中' && item.process != '培训中' && item.process != '考核') {
    if (item.process === '入职') {
      item.showDetail = true
      return `预计到岗时间：${item.onDutyTime || '未设置'}`
    }
    if (item.process !== '实习' && item.process !== '试用') {
      return ""
    }
  }
  if (item.abnormal === 1) {
    str = `<div >异常操作原因：${item.abnormalReason ? item.abnormalReason : "未填写原因"}\n<div style='color:#ccc;margin:6px 0'><span style='margin-right:40px'>异常操作人：${item.abnormalOperator} </span>异常操作时间：${item.abnormalTime}</div></div>`
  }
  if (item.processResult == "放弃" && item.process != '面试') {
    // return str + `放弃原因：${item.abandonReason ? item.abandonReason : "未填写放弃原因"}`
    item.failedList = [
      {
        key: "放弃原因：",
        value: item.abandonReason ? item.abandonReason : "未填写放弃原因",
        operatorTime: item.operatorTime,
        operator: item.operator,

        style: {
          color: "#F0A03D",
          background: "#FBFBF5"
        }
      }
    ]
  }
  if (item.processResult == "淘汰" && item.process != '面试') {
    // return str + `淘汰原因：${item.eliminateReason ? item.eliminateReason : "未填写淘汰原因"}`
    item.failedList = [
      {
        key: "淘汰原因：",
        value: item.eliminateReason ? item.eliminateReason : "未填写淘汰原因",
        operatorTime: item.operatorTime,
        operator: item.operator,
        style: {
          color: "#FF4242",
          background: "#FBF5F5"
        },
      }
    ]
  }
  if (item.process == "简历投递") {
    return str + "投递时间：" + item.operatorTime

  } else if (item.process == "简历筛选") {
    // return `原因：${item.passReason || "未填写原因"}`
  } else if (item.process == "预约面试") {
    item.canEdit = true
    return str + `面试官分配：${getNameDetail(item.interviewOfficer)}\n面试时间：${getNameDetail(item.interviewTime)}\n面试类型：${getNameDetail(item.interviewType)}\n面试会议链接：${getNameDetail(item.interviewUrl,false,'link')} `
  } else if (item.process == '到面') {
    return str + `面试类型：${getNameDetail(item.interviewType)}`
  } else if (item.process == '面试') {
    return str + `面试官：${getNameDetail(item.interviewOfficer)}        面试类型：${getNameDetail(item.interviewType)}\n面试结果通知时间：${getNameDetail(item.interviewSendTime)}`
  } else if (item.process == '预约培训') {
    return str + `培训期数：${getNameDetail(item.trainingNumberName)}\n培训时间：${getNameDetail(item.trainingTime)}\n培训官：${getNameDetail(item.trainingOfficer, true)}\n口味：${getNameDetail(item?.trainingTaste)}\n忌口：${getNameDetail(item?.trainingDislikeFood)}`
  } else if (item.process == '发送培训邮件') {
  } else if (item.process == '培训中') {
    item.showDetail = true
    return str + `培训期数：${getNameDetail(item.trainingNumberName)}\n培训时间：${getNameDetail(item.trainingTime)}\n培训官：${getNameDetail(item.trainingOfficer, true)}\n考核时间：${getNameDetail(item?.examineTime)}\n考核官：${getNameDetail(item?.examineOfficer, true)}`
  } else if (item.process == '考核') {
    return str + `考核官：${getNameDetail(item?.examineOfficer, true)}\n考核时间：${getNameDetail(item?.examineTime)}`
  } else if (item.process == '入职') {
    item.canEdit = true
    return str + `用人单位负责人：${getNameDetail(item?.responseUser)}\n入职分校：${getNameDetail(item?.school)}\n入职科目：${getNameDetail(item?.subject)}\n入职年级：${getNameDetail(item?.grade)}\n导师：${getNameDetail(item?.teacher)}`
  } else if (item.process == '实习') {
    item.showDetail = true
    item.canEdit = true
    return str + `用人单位负责人：${getNameDetail(item?.responseUser)}\n入职分校：${getNameDetail(item?.school)}\n入职科目：${getNameDetail(item?.subject)}\n入职年级：${getNameDetail(item?.grade)}\n导师：${getNameDetail(item?.teacher)}`
  } else if (item.process == '试用') {
    item.showDetail = true
    item.canEdit = true
    return str + `用人单位负责人：${getNameDetail(item?.responseUser)}\n所属分校：${getNameDetail(item?.school)}\n所属科目：${getNameDetail(item?.subject)}\n所属年级：${getNameDetail(item?.grade)}\n导师：${getNameDetail(item?.teacher)}`
  } else if (item.process == '转正') {
    item.canEdit = true
    return str + `用人单位负责人：${getNameDetail(item?.responseUser)}\n分校：${getNameDetail(item?.school)}\n科目：${getNameDetail(item?.subject)}\n年级：${getNameDetail(item?.grade)}`
  } else if (item.process == '待录取') {
    console.log(item)
    if (item.processResult == '通过' || item.processResult == "警告") {
      item.canEdit = true;
    }
    if (item.processResult == '淘汰') {
      return str + `录取通知时间：${getNameDetail(item.offerSendTime)}`;
    }
    return str + `录取通知时间：${getNameDetail(item.offerSendTime)}\n领取offer时间：${getNameDetail(item.receiveTime)} \n预计到岗时间：${getNameDetail(item?.onDutyTime)}\n用人单位负责人：${getNameDetail(item?.responseUser)}\n录取分校：${getNameDetail(item?.school)}\n录取年级：${getNameDetail(item?.subject)}\n录取科目：${getNameDetail(item?.grade)}`
  }
  return str
}


const getStatusImage = (status) => {
  const map = {
    "通过": "success",
    '淘汰': "error",
    "放弃": "error",
    "进行中": "watting",
    "警告": 'warning'
  }
  return getImageUrl(`${map[status]}.png`, 'applicationDetail')
}

const getInterviewStatus = (status) => {
  const map = {
    "通过": {
      text: "通过",
      style: {
        background: 'rgba(22,199,22,0.2)',
        color: '#16C716'
      }
    },
    '淘汰': { text: "淘汰", style: { color: "#FF4242", background: "rgba(255,66,66,0.2)" } },
    "放弃": { text: "放弃", style: { color: "#EC9903", background: "rgba(240,160,61,0.2)" } },
    "查看《参培协议》": {
      text: "查看《参培协议》", methodName: 'checkAgreeMent', style:
      {
        background: "#fff ",
        textDecoration: 'underline',
        cursor: 'pointer',
        color: "#209ee4",
      }
    },
    "已加入钉钉群": {
      text: "已加入钉钉群", dd_icon: true, style: {
        background: 'rgba(32, 158, 228, 0.2)',
        color: '#209EE4'
      }
    },
  }
  return map[status]
}
const agreementDetail = ref<any>({})
const checkAgreeMent = (item) => {
  // console.log(item)
  if (item.userTrainingInfo) {
    showTrain.value = 2;
    agreementShow.value = true;
    console.log(item.userTrainingInfo)
    agreementDetail.value = item.userTrainingInfo
  } else {
    message.error('暂无培训协议')
  }
}
const handleClick = (item) => {

  if (!item.status?.methodName) return
  const map = {
    checkAgreeMent: checkAgreeMent(item)
  }
  map[item.status.methodName]
}

const handleBtnClick = (item) => {
  console.log(item, 'item.methodName')
  if (!item.button?.method) return
  const map = {
    sendAgain: sendAgain(item)
  };
  map[item.button.method]
}

const sendAgain = (item) => {
  console.log(item, '===>sendagain');
  row.value = item
  modal.value.show = true
}
const commentFormRef = ref<any>(null)
const row = ref<any>({})
const addComment = async (item) => {
  console.log(item, '===>addComment');
  // trainingProgress
  row.value = item
  commentShow.value = true
};
const emits = defineEmits(['reRender']);
const reRender = () => {
  emits("reRender")
}
const commentComfirm = async () => {
  console.log(props.id)
  const res = await commentFormRef.value.submitForm()
  const { userName } = store.userInFor
  let param = {
    resumeId: props.id,
    processId: row.value.processId,
    assess: res[0].value,
    result: "",
    operator: userName
  }
  const data = await trainingProgress(param);
  if (data && data.code === '10000') {
    // progressIndex
    commentFormList.value[0].value = ""
    commentShow.value = false;
    store.$patch({
      noticeNumber: Math.random()
    })
    message.success("新增成功")
    emits('reRender');
  } else {
    message.error(data.msg)
  }
}

const list = ref<any>([

])
const checkAttachments = (item) => {
  console.log(item, 'item')
  agreementShow.value = true;
  if (item.process == '签署应约协议') {
    showTrain.value = 1
    agreementDetail.value = item.agreementResponse
  } else if (item.process == '签署三方协议') {
    showTrain.value = 3
    if (item.contractFileUrl) {
      console.log(item.contractFileUrl, 'item.contractFileUrl')
      tripartiteAgreementList.value = item.contractFileUrl
    } else {
    }
  } else {
    showTrain.value = 2
  }
}


</script>

<style lang="less" scoped>
.wrap {
  display: flex;
  flex-direction: column;
  margin-top: 31px;

  .item {
    padding-bottom: 58px;
    border-left: 1px dashed #16C716;
    position: relative;
    padding-left: 17px;
    box-sizing: border-box;

    &:last-child {
      border-left: 1px dashed transparent;
    }

    .title {
      font-weight: 500;
      font-size: 16px;
      color: #333333;
      line-height: 19px;
      position: absolute;
      top: -12px;
      display: flex;
      align-items: center;

      .usericon {
        cursor: pointer;
        color: #209ee4;
        margin-left: 6px;
      }

      .interview-box {
        height: 24px;
        padding: 0 8px;
        box-sizing: border-box;
        border-radius: 4px 4px 4px 4px;
        font-weight: 400;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
        line-height: 24px;
        margin-left: 4px;
      }
    }

    .icon {
      position: absolute;
      top: -12px;
      left: -12px;
      width: 24px;
      height: 24px;
    }

    .content {
      padding: 16px;
      box-sizing: border-box;
      background: #F5F7FB;
      border-radius: 3px 3px 3px 3px;
      color: #333;
      font-size: 16px;
      font-weight: 400;
      line-height: 32px;

      .hideOrExpand {
        color: #209ee4;
        cursor: pointer;
      }
    }
  }
}

.tip-wrap {
  display: flex;
  color: #333;
  flex-direction: column;
  // gap:10px;
  margin: 12px 0 8px 0;
  box-sizing: border-box;

  .tip {
    display: flex;
    margin-top: 10px;
    margin-right: 40px;

    .tip-left {
      margin-right: 10px;
      ;
    }
  }
}

.operator {
  display: flex;
  margin-top: 0px;

  font-weight: 400;
  font-size: 14px;
  color: #B3C0C8;

  .operator-person {
    margin-right: 40px;

  }
}

.index {
  margin-right: 6px;
  width: 20px;
  height: 20px;
  background: #8F87D8;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  position: relative;
  color: #fff;

  span {
    position: absolute;
    z-index: 11;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &::after {
    content: "";
    width: 0;
    height: 0;
    border: 10px solid;
    border-color: transparent transparent #8F87D8;
    position: absolute;
    left: -4px;
    bottom: 1px;
  }
}

.evaluateList {
  display: flex;
  flex-direction: column;

  .context {
    background: #F5F7FB;
    border-radius: 3px 3px 3px 3px;
    padding: 16px;
    box-sizing: border-box;
    margin-top: 20px;

    &:nth-child(1) {
      margin-top: 0;
    }

    .top {
      display: flex;
      font-size: 14px;
      color: #333;
      margin-bottom: 8px;
      white-space: nowrap;

      .top-right {
        position: absolute;
        right: 20px;
        display: flex;
        font-size: 14px;
        color: #666;
        font-size: 400;
        gap: 40px;
      }
    }
  }

  .detail {
    font-size: 14px;
    color: #666;
    font-size: 400;
    line-height: 28px;
    width: 100%;
  }


}

.add-comment {
  font-weight: 400;
  font-size: 16px;
  color: #209EE4;
  line-height: 19px;
  margin-top: 8px;
  text-decoration-line: underline;
  cursor: pointer;
}

.status-box {
  display: flex;

  div {
    font-size: 14px;
    padding: 2px 4px;
    box-sizing: border-box;
    border-radius: 4px;
  }
}

.sub-list {
  li {
    display: flex;
    gap: 5px;
    margin-top: 10px;
  }
}

.pre {
  white-space: break-spaces;
}

.filter {
  filter: grayscale(1);
  text-decoration: line-through;
  pointer-events: none;
}

.checkAttachments {
  color: #209ee4;
  cursor: pointer;
}

.status {
  white-space: pre;
}

.img-container {
  display: flex;
  flex-direction: column;

  img {
    width: 100%;
    margin-bottom: 20px;
  }
}

.reason {
  .reason-status {
    display: flex;
    position: relative;

    .top-right {
      position: absolute;
      right: 0;
      display: flex;
      gap: 40px;
    }

    span {
      background: rgba(22, 135, 255, 0.2);
      padding: 0 8px;
      border-radius: 4px;
      color: #1687FF;
    }

    .reason-active {
      color: #E7644A;
      background: rgba(231, 100, 74, 0.2);
    }
  }

  .reason-index {
    display: flex;
    align-items: center;
  }
}

.rb-steps {

  // overflow: auto;
}

.btn {
  color: #209eff;

  &:hover {
    color: #73abd6;
  }
}

.disable {
  pointer-events: none !important;
  color: #ccc !important;
}

.days {
  padding: 0px 4px;
  box-sizing: border-box;
  height: 20px;
  background: #209EE4;
  border-radius: 10px 10px 0px 10px;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  color: #fff;
  margin-right: 4px;
}

.btns {
  button {
    &:hover {
      border: 1px solid #209ee4;
    }
  }
}
</style>
<style>
.interviewUrl {
  color: #209ee4;
  text-decoration: underline;

  &:hover {
    color: blue;
    text-decoration: underline;
  }
}
</style>
